<!--
  - Author: Ray (qray686898@163.com)
  -->

<template>
  <div class="logo">
    <transition name="fade">
      <span v-if="isCollapse" class="logo_title is-bold " key="0" :class="{'is-text':!type,'is-img':type}">
        <template v-if="type">
          <img :src="userInfo.appKey" width="40" height="40" />
        </template>
        <template v-else>
          {{userInfo.appName}}
        </template>
      </span>
    </transition>
    <transition-group name="fade">
      <template v-if="!isCollapse">
        <span class="logo_title is-bold" key="1">{{userInfo.appName}} </span>
      </template>
    </transition-group>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";
export default {
  name: "logo",
  data() {
    return {};
  },
  props: ["isCollapse"],
  created() {},
  computed: {
   
  },
  computed: {
     ...mapState({
      userInfo: state => state.user.userInfo
    }),
    type: function(val) {
     return false
    }
  },
  methods: {}
};
</script>
<style scoped="scoped" lang="scss">
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter-active {
  transition: opacity 2.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.is-text {
  position: absolute;
  top: 0;
  left: 10px;
}
.is-img {
  position: absolute;
  top: 10px;
  left: 10px;
}
.logo_subtitle {
  font-size: 16px;
  padding-top: 5px;
}
.logo{
  border-bottom: 2px solid #F9FBFB;
  color: #000;
}
</style>
